<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>轮播管理</el-breadcrumb-item>
            </el-breadcrumb></span
          >
        </div>
      </template>
      <div>
        <el-button type="primary" size="small" @click="addVisible = true"
          >添加轮播</el-button
        >
        <el-button type="primary" size="small" @click="batchUpdateChange"
          >批量更新</el-button
        >
        <el-button type="danger" size="small" @click="batchDelete"
          >批量删除</el-button
        >
        <el-select
          v-model="status"
          size="small"
          style="width: 150px; margin-left: 15px"
          clearable
          @clear="status = null"
          placeholder="请选择轮播状态"
        >
          <el-option label="轮播中" :value="2"> </el-option>
          <el-option label="未进行轮播" :value="1"> </el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="search_key"
          size="small"
          style="width: 250px; margin-left: 15px"
        >
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="booms"
        tooltip-effect="dark"
        v-loading="loading"
        :stripe="true"
        :height="maxHeight"
        style="width: 100%; top: 15px"
        @selection-change="accountSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column
          label="标题"
          width="200"
          show-overflow-tooltip
          fixed="left"
        >
          <template #default="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="图片" show-overflow-tooltip>
          <template #default="scope">
            <el-image
              style="width: 70%"
              :src="scope.row.url"
              fit="scale-down"
              :preview-src-list="[scope.row.url]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="轮播状态" width="120"
          ><template #default="scope">
            <el-tag v-if="scope.row.status === 2" type="success"
              >轮播中
            </el-tag>
            <el-tag v-else type="error">未进行轮播 </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="created"
          label="添加时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="updated" label="最近更新" show-overflow-tooltip>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button type="text" @click="userEdit(scope.row)">编辑</el-button>
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              cancelButtonType="danger"
              iconColor="red"
              title="确定删除该账号信息吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <span class="delte"
                  ><el-button type="text">删除</el-button></span
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="total"
          :disabled="loading"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
  <el-dialog
    title="编辑轮播"
    v-model="editDialogVisible"
    width="400px"
    :before-close="editHandleClose"
  >
    <el-form ref="boomRef" :model="boom" label-width="80px">
      <el-form-item label="轮播状态">
        <el-select v-model="boom.status" placeholder="请选择轮播状态">
          <el-option label="轮播中" :value="2"></el-option>
          <el-option label="未进行轮播" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="轮播标题">
        <el-input type="textarea" v-model="boom.title"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    title="编辑轮播"
    v-model="batchUpdateVisible"
    width="400px"
    :before-close="editHandleClose"
  >
    <el-form ref="boomRef" :model="boom" label-width="80px">
      <el-form-item label="轮播状态">
        <el-select v-model="boom.status" placeholder="请选择轮播状态">
          <el-option label="轮播中" :value="2"></el-option>
          <el-option label="未进行轮播" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="batchUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchUpdate">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    title="添加轮播"
    v-model="addVisible"
    width="500px"
    :before-close="editHandleClose"
  >
    <el-form ref="boomRef" :model="boom" label-width="80px">
      <el-form-item label="轮播状态">
        <el-select v-model="boom.status" placeholder="请选择轮播状态">
          <el-option label="轮播中" :value="2"></el-option>
          <el-option label="未进行轮播" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片地址">
        <el-input type="textarea" v-model="boom.url"></el-input>
      </el-form-item>
      <el-form-item label="轮播标题">
        <el-input type="textarea" v-model="boom.title"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { BoomService } from "@/api/booms";
import { reactive, toRefs, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "BoomList",
  setup() {
    const handleCurrentChange = (page: number) => {
      data.page = page;
    };
    const list = () => {
      data.loading = true;
      BoomService.list({
        page: data.page,
        status: data.status,
        search_key: data.search_key,
      }).then((res) => {
        data.loading = false;
        data.total = res.data.data.total;
        data.booms = res.data.data.booms;
      });
    };
    const handleDelete = (id: number) => {
      BoomService.delete([id]).then((res) => {
        if (res.data.code === 0) {
          ElMessage.success("删除成功");
          list();
        } else {
          ElMessage.error(res.data.message);
        }
      });
    };
    const userEdit = (boom: any) => {
      const { status, title, id } = boom;
      data.boom.status = status;
      data.boom.title = title;
      data.boom.id = id;
      data.editDialogVisible = true;
    };
    const batchDelete = () => {
      ElMessageBox.confirm("此操作将永久删除选择的轮播, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          BoomService.delete(data.select_ids).then((res) => {
            if (res.data.code === 0) {
              list();
              ElMessage({
                type: "success",
                message: "删除成功!",
              });
            } else {
              ElMessage({
                type: "error",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {});
    };
    const accountSelectionChange = (rows: any) => {
      data.select_ids = [];
      rows.forEach((i: any) => {
        // @ts-ignore
        data.select_ids.push(i.id);
      });
    };
    const editHandleClose = () => {
      data.editDialogVisible = false;
      data.batchUpdateVisible = false;
      data.addVisible = false;
      // @ts-ignore
      data.boom = { ...initBoom };
    };
    const change = (status: number) => {
      // @ts-ignore
      data.status = status;
    };
    const initBoom = { status: null, title: "", id: null, url: "" };
    const save = () => {
      if (data.boom.title === "") {
        ElMessage.error("请输入标题！");
        return;
      }
      BoomService.update({
        ids: [data.boom.id],
        status: data.boom.status,
        title: data.boom.title,
      }).then((res) => {
        if (res.data.code === 0) {
          list();
          ElMessage.success("修改成功");
        } else {
          ElMessage.error(res.data.message);
        }
        data.editDialogVisible = false;
        data.boom = { ...initBoom };
      });
    };
    const batchUpdate = () => {
      if (data.select_ids.length == 0) {
        ElMessage.warning("至少选择一条");
        data.batchUpdateVisible = false;
        return;
      }
      BoomService.update({
        ids: data.select_ids,
        status: data.boom.status,
      }).then((res) => {
        if (res.data.code === 0) {
          list();
          ElMessage.success("修改成功");
        } else {
          ElMessage.error(res.data.message);
        }
        data.batchUpdateVisible = false;
      });
    };
    const batchUpdateChange = () => {
      if (data.select_ids.length == 0) {
        ElMessage.warning("至少选择一条");
        return;
      }
      data.batchUpdateVisible = true;
    };

    const add = () => {
      BoomService.add({
        url: data.boom.url,
        title: data.boom.title,
        status: data.boom.status,
      }).then((res) => {
        if (res.data.code === 0) {
          ElMessage.success("添加成功");
          data.addVisible = false;
          data.boom = { ...initBoom };
          list();
        } else {
          ElMessage.error(res.data.message);
        }
      });
    };
    let data = reactive({
      maxHeight: document.documentElement.clientHeight - 280,
      search_key: "",
      page: 1,
      booms: [],
      add: add,
      addVisible: false,
      boom: { ...initBoom },
      total: 0,
      select_ids: [],
      userInfo: {},
      status: null,
      loading: false,
      batchUpdate: batchUpdate,
      handleCurrentChange: handleCurrentChange,
      handleDelete: handleDelete,
      userEdit: userEdit,
      batchDelete: batchDelete,
      accountSelectionChange: accountSelectionChange,
      editDialogVisible: false,
      batchUpdateVisible: false,
      batchUpdateChange: batchUpdateChange,
      editHandleClose: editHandleClose,
      change: change,
      save: save,
    });
    list();
    watch(
      () => data.search_key,
      (newValue, oldVlaue) => {
        data.page = 1;
        data.search_key = newValue;
        list();
      }
    );
    watch(
      () => data.page,
      (newValue, oldVlaue) => {
        list();
      }
    );
    watch(
      () => data.status,
      (newValue, oldVlaue) => {
        list();
      }
    );
    const getHeight = () => {
      data.maxHeight = document.documentElement.clientHeight - 280;
    };
    window.addEventListener("resize", getHeight, false);
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less">
.delte {
  .el-button--text {
    color: red !important;
    margin-left: 10px;
  }
}
</style>